<template>
	<view class="flex justify-center justify-center align-center-important" style="width: 60rpx;height: 60rpx;" @click="onClick()">
		<view style="background-color: #E0E0E0;width: 40rpx;height: 60rpx;border-radius: 5px;"></view>
		<view style="border: 1px solid #fff;position: absolute;" :style="on?'top: 6rpx;':'bottom:6rpx'">
			<view style="width: 60rpx;height: 30rpx;border-radius: 4px;" :style="on?'background-color: #F76842;':'background-color: #FFC592;'"></view>
		</view>
	</view>
</template>

<script>
// #ifdef APP-PLUS
const animation = weex.requireModule('animation');
// #endif

export default {
	name: 'em-loading-icon',
	components: {},
	props: {
		theme: {
		  type: Object,
		  default: () => {}
		},
		value: {
		  type: String,
		  default:''
		},
		size: {
		  type: Number,
		  default:12
		},
		option:{
			type:Array,
			default:[true,false]
		}
	},
	data() {
		return {
			topSize: '',
			//on:false,
		};
	},
	watch:{
	    value(newValue,oldValue){
			
		}
	},
	computed: {
		on(){
			return this.value == this.option[0]?true:false
		}
	},
	async created() {
		
	},
	methods: {
		onClick(){
			let status = this.value == this.option[0]?this.option[1]:this.option[0]
			this.$emit('input', status)
			this.$emit("onChange", status)
		}
	}
};
</script>

<style scoped>
.loading-wrapper {
	position: absolute;
	left: 0;
	right: 0;
	z-index: -1;
	background-color: #ffffff;
	/* #ifdef APP-NVUE */
	flex: 1;
	/* #endif */
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.loading-wrapper-embed {
	flex: 1;
	position: absolute;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	text-align: center;
	background-color: transparent;
	z-index: 1;
}
</style>
